package myJs.user.detailInfo

import com.softwaremill.quicklens._
import myJs.Utils
import myJs.api.Api
import myJs.cps._
import myJs.myPkg._
import myJs.myPkg.reactBootstrap.Modal
import myJs.myPkg.reactHookForm._
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.Pojo._
import shared.pojo.User.PdfInfo
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._

import scala.concurrent.Future
import scala.scalajs.js
import scala.scalajs.js.{Date, JSON}

/** Created by yz on 21/1/2022
  */
@react object ModifyPdfInfoCp {

  case class Props(
      refreshRow: () => Future[Unit],
      show: Boolean = false,
      showChange: Boolean => Unit,
      row: PdfInfo
  )

  val component = FunctionalComponent[Props] { props =>
    val useForm = ReactHookForm.useForm(
      UseFormOptions(
        mode = "onChange"
      )
    )
    val (pdfInfo, setPdfInfo) = useState(PdfInfo())

    object FTool {

      def handleClose = () => {
        props.showChange(false)
      }

      def titleChange = (v: String) => {
        val newRow = pdfInfo.modify(_.title).setTo(v)
        setPdfInfo(newRow)
      }

      def unitChange = (v: String) => {
        val newRow = pdfInfo.modify(_.unit).setTo(v)
        setPdfInfo(newRow)
      }
      def addressChange = (v: String) => {
        val newRow = pdfInfo.modify(_.address).setTo(v)
        setPdfInfo(newRow)
      }
      def reporterChange = (v: String) => {
        val newRow = pdfInfo.modify(_.reporter).setTo(v)
        setPdfInfo(newRow)
      }
      def checkerChange = (v: String) => {
        val newRow = pdfInfo.modify(_.checker).setTo(v)
        setPdfInfo(newRow)
      }
      def update = () => {
        val index = layer.alert(Utils.element, Utils.layerOptions)
        Api.user.updatePdfInfo(pdfInfo).map { response =>
          props.refreshRow().map { x =>
            layer.close(index)
            props.showChange(false)
            swal(SwalOptions(title = "成功", text = "修改成功！", `type` = "success"))
          }
        }
        ()
      }

      def formSubmit = useForm.handleSubmit((data: js.Dictionary[js.Any]) => {
        println(JSON.stringify(data))
        FTool.update()
      })

    }

    useEffect(
      () => {
        setPdfInfo(props.row)
      },
      List(props.row)
    )

    Modal(onHide = FTool.handleClose, show = props.show, size = "modal1000")(
      Modal.Header(bsPrefix = "modal-header bg-primary", closeButton = true)(
        Modal.Title(
          i(className := "fa fa-pencil"),
          span(style := Style(fontWeight = "bold"), id := "lblAddTitle", " 修改信息")
        )
      ),
      form(
        id := "form",
        data - "toggle" := "validator",
        className := "form-horizontal",
        onSubmit := FTool.formSubmit,
        Modal.Body(
          div(
            className := "row-fluid",
            InputInlineCp(
              useForm = useForm,
              label = "标题",
              name = "title",
              labelWidth = 2,
              inputWidth = 3,
              value = pdfInfo.title,
              onChange = FTool.titleChange
            ),
            FormGroupInlineCp(
              useForm = useForm,
              names = List("unit", "address")
            )(
              InputInlineNoFormGroupCp(
                useForm = useForm,
                value = pdfInfo.unit,
                label = "送检单位",
                name = s"unit",
                onChange = FTool.unitChange,
                inputWidth = 3
              ),
              InputInlineNoFormGroupCp(
                useForm = useForm,
                value = pdfInfo.address,
                label = "地址",
                name = s"address",
                onChange = FTool.addressChange,
                inputWidth = 3
              )
            ),
            FormGroupInlineCp(
              useForm = useForm,
              names = List("reporter", "checker")
            )(
              InputInlineNoFormGroupCp(
                useForm = useForm,
                value = pdfInfo.reporter,
                label = "检验人",
                name = s"reporter",
                onChange = FTool.reporterChange,
                inputWidth = 3
              ),
              InputInlineNoFormGroupCp(
                useForm = useForm,
                value = pdfInfo.checker,
                label = "审核人",
                name = s"checker",
                onChange = FTool.checkerChange,
                inputWidth = 3
              )
            )
          )
        ),
        Modal.Footer(bsPrefix = "modal-footer bg-info")(
          button(`type` := "submit", className := "btn blue", "确定"),
          button(
            `type` := "button",
            className := "btn green",
            data - "dismiss" := "modal",
            "取消",
            onClick := FTool.handleClose
          )
        )
      )
    )
  }

}
